<template>
  <div class="setting" :style="{minHeight:$store.state.minHeight+'rem'}">
    <myHead title="设置" background-color="linear-gradient(170deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%)"></myHead>
    <div class="list">
      <div class="list_once" @click="edit('绑定手机号码','13891049125')">
        <div class="title">绑定手机号码</div>
        <div class="content">13891049125</div>
        <van-icon name="arrow" color="#999999" size="16" />
      </div>
      <div class="list_once" @click="edit('设置密码','请输入密码')">
        <div class="title">设置密码</div>
        <div class="content"></div>
        <van-icon name="arrow" color="#999999" size="16" />
      </div>
      <router-link class="list_once" tag="div" to="/views/Business/agreement">
        <div class="title">用户协议</div>
        <div class="content"></div>
        <van-icon name="arrow" color="#999999" size="16" />
      </router-link>
      <router-link class="list_once" tag="div" to="/views/Business/about">
        <div class="title">关于我们</div>
        <div class="content"></div>
        <van-icon name="arrow" color="#999999" size="16" />
      </router-link>
      <div class="list_once" @click="call('13891049125')">
        <div class="title">客服电话</div>
        <div class="content">13891049125</div>
        <van-icon name="arrow" color="#999999" size="16" />
      </div>
    </div>
    <van-dialog v-model="show" :title="title" confirmButtonColor="#FB4448" cancelButtonColor="#333333" show-cancel-button>
      <input class="dialog" :name="name" type="text" :placeholder="placeholder" />
    </van-dialog>
  </div>
</template>

<script>
  import myHead from "../../components/BusinessComponents/lib/myHead";
  import Vue from 'vue';
  import { Switch,Icon,Dialog,Picker } from 'vant';

  Vue.use(Switch);
  Vue.use(Icon);
  Vue.use(Dialog);
  Vue.use(Picker);

  export default {
      name: "setting",
      components: {
        myHead
      },
      data() {
        return {
          checked: true,
          show: false,
          name:"",
          title:"",
          placeholder:"",
        };
      },
      methods: {
        edit:function (title,placeholder) {
          this.title = title;
          this.placeholder = placeholder;
          this.show = true;
        },
        time:function () {
          this.showTime = true;
        },
        call(phone){
          // 调用拨号功能
          window.location.href = 'tel://' + phone;
        }
      }
  }
</script>

<style scoped>
  .setting{
    background: #F5F5F5;
  }
  >>>.van-switch{
    font-size: .3rem;
  }
  >>>.van-dialog__header{
    line-height:.24rem;
    padding-top:.24rem;
  }
  >>>.van-dialog__content{
    margin: .16rem .12rem .23rem;
  }
  >>>.van-dialog{
    width: 3.2rem;
    font-size: .16rem;
    border-radius:.16rem;
  }
  >>>.van-button{
    font-size: .16rem;
    height: .5rem;
    line-height: .48rem;
  }
  >>>.van-picker__toolbar{
    display: none;
  }
  >>>.van-picker-column{
    font-size: .16rem;
  }
  >>>.van-picker-column__item{
    height: .44rem !important;
  }
  .setting .dialog{
    width: calc(100% - 0.18rem);
    height: .36rem;
    border: none;
    background: #F6F6F6;
    border-radius: .08rem;
    padding: 0 .09rem;
    font-size: .14rem;
  }
  .setting .to{
    position: absolute;
    z-index: 9;
    width: calc(100% - .24rem);
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    font-size: .15rem;
  }
  .setting .title{
    font-size: .13rem;
    font-weight: bold;
  }
  .setting .list{
    background: #ffffff;
    padding-top: .5rem;
  }
  .setting .list_once{
    display: flex;
    padding: .18rem .2rem;
    align-items: center;
    border-bottom: 1px solid #F1F1F3;
  }
  .setting .content{
    flex-grow: 1;
    text-align: right;
    font-size: .13rem;
    color: #666666;
    margin-right: .04rem;
  }
</style>
